<!--
 * @Author: 刘智超
 * @Date: 2023-12-28 23:17:13
 * @LastEditors: 刘智超
 * @LastEditTime: 2024-01-02 21:33:43
 * @Description:
-->
<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table row-key="index" :data="data" :columns="COLUMNS" :stripe="stripe" :bordered="bordered" :hover="hover"
          :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader" cell-empty-content="-"
          resizable lazy-load @row-click="handleRowClick">
          <!-- 序号 -->
          <template #rowIndex="{rowIndex}">{{ rowIndex + 1 }}</template>
          <!-- 图片预览及展示 -->
          <template #image="{row}">
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{open}">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>


            </div>
          </template>
          <!-- 价格拼接 -->
          <template #price="{row}">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>
          <!-- 操作栏 -->
          <template #op>
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
        </t-table>

      </div>
    </div>
    <!-- 分页 -->
    <t-pagination v-if="total > 10" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="total"
      @change="onPageChange" />
  </div>
</template>

<script setup lang="ts">
import {COLUMNS} from './constants';
import {ref,onMounted} from 'vue';
import {ErrorCircleFilledIcon,CheckCircleFilledIcon,CloseCircleFilledIcon} from 'tdesign-icons-vue-next';
import {getProjectList} from '@/api/serve';


var total = ref(0);
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);
let data = ref([]);

//在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
const isDecimals = (val) =>
{
  if(String(val).indexOf('.') > -1)
  {
    return true;
  }
  return false;
};


const handleRowClick = (e) =>
{
  console.log(e);
};

//生命周期
onMounted(() =>
{
  getList();
});


//获取列表数据
const getList = async () =>
{
  const res = await getProjectList(pagination.value);
  data.value = res.data.records;
  total.value = Number(res.data.total);
};

// 翻页设置当前页
const onPageChange = (val) =>
{
  pagination.value.pageNum = val.current;
  pagination.value.pageSize = val.pageSize;
  getList();
};


//分页对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1
});
</script>
